<template>
    <div style="user-select: none;">
      <h1>P152 - watch监视reactive中定义的属性</h1>
      <div>
        点下面的每一行文字都有用惊喜
        <h4 @click="person.name+='~'">姓名: {{ person.name }}</h4>
        <h4 @click="person.age++">年龄: {{ person.age }}</h4>
        <h4 @click="person.job.type+='!'">工作: {{ person.job.type }}</h4>
        <h4 @click="person.job.salary++">薪水: {{ person.job.salary }}</h4>
      </div>
    </div>
    <!-- 
        
     -->
  </template> 
          
    <script>
  import { computed, reactive, ref, watch } from "vue";
  export default {
    name: "App",
    setup(props, context) {
        let person = reactive({
            name:'mikaisa',
            age:18,
            job:{
                salary:12,
                type:'前端工程师'
            }
        });

        watch(()=>person.job,(newValue,oldValue)=>{
            console.log('person的job有变化');
            console.log(newValue,oldValue);
        },{deep:true});

        return {
            person,
        }

    },
  };
  </script>
          
  <style>
  .zhedie {
    height: 15px;
    overflow: hidden;
  }
  </style>
          